<div ng-if="CP.current_tab == 'sliders'" style="margin-top: 10px;">

  <div class="settings" dropdown>
    <a href="" class="dropdown-toggle" dropdown-toggle>
      <i class="icon-gear"></i>
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu pull-right">
      <li ng-click="CP.active_sliders.rgb = !CP.active_sliders.rgb" ng-class="{ 'checked': CP.active_sliders.rgb}"><a href="">RGB</a></li>
      <li ng-click="CP.active_sliders.hsv = !CP.active_sliders.hsv" ng-class="{ 'checked': CP.active_sliders.hsv}"><a href="">HSB</a></li>
      <li ng-click="CP.active_sliders.hsl = !CP.active_sliders.hsl" ng-class="{ 'checked': CP.active_sliders.hsl}"><a href="">HSL</a></li>
    </ul>
  </div>

  <div class="slider-group" ng-if="CP.active_sliders.rgb">
    <div class="slider-box">
      <div>Red</div>
      <input class="color-slider" type="range" min="0" max="255"
             style="{{ slider_gradient(color.rgba, 'r', 0, 255, 255) }}"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.r">
      <input class="color-input" type="number" min="0" max="255"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.r">
    </div>
    <div class="slider-box">
      <div>Green</div>
      <input class="color-slider" type="range" min="0" max="255"
             style="{{ slider_gradient(color.rgba, 'g', 0, 255, 255) }}"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.g">
      <input class="color-input" type="number" min="0" max="255"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.g" >
    </div>
    <div class="slider-box">
      <div>Blue</div>
      <input class="color-slider" type="range" min="0" max="255"
             style="{{ slider_gradient(color.rgba, 'b', 0, 255, 255) }}"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.b">
      <input class="color-input" type="number" min="0" max="255"
             ng-change="update_current_color(color.rgba)"
             ng-model="color.rgba.b">
    </div>
  </div>

  <div class="slider-group" ng-if="CP.active_sliders.hsv">
    <div class="slider-box">
      <div>Hue</div>
      <input class="color-slider" type="range" min="0" max="360"
             style="{{ slider_gradient(color.hsva, 'h', 0, 360, 10) }}"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.h">
      <input class="color-input" type="number" min="0" max="360"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.h"><span class="type">°</span>
    </div>
    <div class="slider-box">
      <div>Saturation</div>
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsva, 's', 0, 100, 20) }}"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.s">
      <input class="color-input" type="number" min="0" max="100"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.s"><span class="type">%</span>
    </div>
    <div class="slider-box">
      <div>Brightness</div>
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsva, 'v', 0, 100, 20) }}"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.v">
      <input class="color-input" type="number" min="0" max="100"
             ng-change="update_current_color(color.hsva)"
             ng-model="color.hsva.v"><span class="type">%</span>
    </div>
  </div>

  <div class="slider-group" ng-if="CP.active_sliders.hsl">
    <div class="slider-box">
      <div>Hue</div>
      <input class="color-slider" type="range" min="0" max="360"
             style="{{ slider_gradient(color.hsla, 'h', 0, 360, 10) }}"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.h">
      <input class="color-input" type="number" min="0" max="360"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.h"><span class="type">°</span>
    </div>
    <div class="slider-box">
      <div>Saturation</div>
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsla, 's', 0, 100, 20) }}"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.s">
      <input class="color-input" type="number" min="0" max="100"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.s"><span class="type">%</span>
    </div>
    <div class="slider-box">
      <div>Lightness</div>
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsla, 'l', 0, 100, 20) }}"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.l">
      <input class="color-input" type="number" min="0" max="100"
             ng-change="update_current_color(color.hsla)"
             ng-model="color.hsla.l"><span class="type">%</span>
    </div>
  </div>

  <div class="slider-group">
    <div class="slider-box">
      <div>Alpha</div>
      <input class="color-slider" type="range" min="0" max="100"
             style="{{ slider_gradient(color.hsla, 'a', 0, 1, 0.2) }}"
             ng-change="update_alpha()"
             ng-model="color.alpha">
      <input class="color-input" type="number" min="0" max="100"
             ng-change="update_alpha()"
             ng-model="color.alpha"><span class="type">%</span>
    </div>
  </div>
</div>
